<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta http-equiv="pragma" content="no-cache"> 
	    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate"> 
	    <meta http-equiv="expires" content="0">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" href="../css/swiper.min.css" />
	</head>
	<style type="text/css">
		* {
			margin: 0px;
			padding: 0px;
		}
		body {
			background-color: #F3F3F3;
		}
		.mui-content {
			width: 100%;
			height: 100%;
			background-color: #F3F3F3;
		    -webkit-overflow-scrolling: touch;
		}
		.swiper-slide {
			background-position: center;
			background-size: cover;
			width: 80%;
			height: 500px;
	    }
	</style>
	<body>
		<div class="swiper-container">
			<div class="swiper-wrapper">
	            <!--<div class="swiper-slide" style="background-image:url(../img/index/goods_bg.png)"></div>
	            <div class="swiper-slide" style="background-image:url(../img/index/goods_image.png)"></div>
	            <div class="swiper-slide" style="background-image:url(../img/index/tuijian_bg.png)"></div>
	            <div class="swiper-slide" style="background-image:url(../img/index/goods_image.png)"></div>
	            <div class="swiper-slide" style="background-image:url(../img/index/tuijian_bg.png)"></div>-->
	    		</div>
	    		<!-- Add Pagination -->
    			<div class="swiper-pagination"></div>
		</div>
	</body>
	<script type="text/javascript" src="../js/thirdparty/mui.min.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/jquery-3.3.1.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/swiper.min.js" ></script>
	<script>
	    $(function () {
			var arrayList =  [
	            {"goodsImage": "../img/index/goods_image.png"},
	            {"goodsImage": "../img/index/goods_bg.png"},
	            {"goodsImage": "../img/index/tuijian_bg.png"},
	            {"goodsImage": "../img/index/goods_image.png"}
	        ]
			var html = '';
			for (var index in arrayList) {
				html += getListItem(arrayList[index], index);
			}
			$(".swiper-wrapper").html(html);
			var swiper = new Swiper('.swiper-container', {
		      effect: 'coverflow',
		      grabCursor: true,
		      centeredSlides: true,
		      slidesPerView: 'auto',
		      coverflowEffect: {
		        rotate: 33,
		        stretch: 0,
		        depth: 100,
		        modifier: 1,
		        slideShadows : true,
		      },
		      pagination: {
		        el: '.swiper-pagination',
		      },
		    });
		});
		function getListItem(item,index) {
			var html = '';
			html += '<div class="swiper-slide" style="background-image:url('+item.goodsImage+')" data-index="'+index+'">'
			html += '</div>'
			return html;
		}
		mui(".swiper-wrapper").on('tap','.swiper-slide',function(){
			var index = $(this).data('index');
			console.log(index);
		});
	  </script>
</html>
